<style lang="less">
    @import '../../styles/common.less';
</style>

<template>
<div>
        <i-Form :model="editData" :label-width="100">
      
                <Card>  
        <p slot="title">
            <Icon type="navicon-round"></Icon>
            系统信息<span>{{pagename}}</span>
        </p>
        
        <p style="margin:10px 0;">
            <row>
                <i-col span="12">
                <span style="display:inline-block;width:100px;text-align:right;font-size:13px;">内容模式：</span>
                <Radio-group v-model="mode" @on-change="setmode" type="button">
                    <Radio label="PC"></Radio>
                    <Radio label="手机"></Radio>
                </Radio-group>
                </i-col>
                <i-col span="12">
                    <i-button type="primary" style="float:right" @click="save">提交</i-button>
                </i-col>
            </row>
        </p>

        <p style="margin:10px 0;">
           <Form-item label="网站名称">
                <i-Input type="text" v-model="editData.name" placeholder="网站名称"></i-Input>
            </Form-item>
            <Form-item label="网站域名">
                <i-Input type="text" v-model="editData.weburl" placeholder="网站域名">
                </i-Input>
            </Form-item>            
            <row>
                <i-col span="5">
            <Form-item label="网站标题前缀">
                <i-Input type="text" v-model="editData.pre_title" placeholder="网站标题前缀">
                </i-Input>
            </Form-item> 

                </i-col>
                <i-col span="14">
            <Form-item label="网站标题" v-show="!ismobile">
                <i-Input type="text" v-model="editData.page_title" placeholder="网站标题">
                </i-Input>
            </Form-item> 
            <Form-item label="手机网站标题" v-show="ismobile">
                <i-Input type="text" v-model="editData.mpage_title" placeholder="手机网站标题">
                </i-Input>
            </Form-item> 
                </i-col>
                <i-col span="5">
            <Form-item label="网站标题后缀">
                <i-Input type="text" v-model="editData.end_title" placeholder="网站标题后缀">
                </i-Input>
            </Form-item> 

                </i-col>
            </row>    
            <Form-item label="首页关键词" v-show="!ismobile">
                <i-Input type="text" v-model="editData.page_key" placeholder="首页关键词">
                </i-Input>
            </Form-item>   
            <Form-item label="手机首页关键词" v-show="ismobile">
                <i-Input type="text" v-model="editData.mpage_key" placeholder="手机首页关键词">
                </i-Input>
            </Form-item>  
            <Form-item label="首页描述" v-show="!ismobile">
                <i-Input type="text" v-model="editData.page_desc" placeholder="首页描述">
                </i-Input>
            </Form-item>  
            <Form-item label="手机首页描述" v-show="ismobile">
                <i-Input type="text" v-model="editData.mpage_desc" placeholder="手机首页描述">
                </i-Input>
            </Form-item>  
            <Form-item label="版权" v-show="!ismobile">
                 <UEditor id="copyright" :config="config" ref="copyright"></UEditor>
            </Form-item>  
            <Form-item label="手机版权" v-show="ismobile">
                 <UEditor id="mcopyright" :config="config" ref="mcopyright"></UEditor>
            </Form-item>  
            <Form-item label="首页主要内容" v-show="!ismobile">
                 <UEditor id="body" :config="config" ref="body"></UEditor>
            </Form-item>  
            <Form-item label="手机首页主要内容" v-show="ismobile">
                 <UEditor id="mbody" :config="config" ref="mbody"></UEditor>
            </Form-item>  
            <row>
                <i-col span="6">
            <Form-item label="手机">
                <i-Input type="text" v-model="editData.mobile" placeholder="手机">
                </i-Input>
            </Form-item> </i-col>
                <i-col span="6">
            <Form-item label="电话">
                <i-Input type="text" v-model="editData.tel" placeholder="电话">
                </i-Input>
            </Form-item> </i-col>
                <i-col span="6">
            <Form-item label="邮箱">
                <i-Input type="text" v-model="editData.email" placeholder="邮箱">
                </i-Input>
            </Form-item> </i-col>
                <i-col span="6">
            <Form-item label="QQ">
                <i-Input type="text" v-model="editData.qq" placeholder="QQ">
                </i-Input>
            </Form-item> </i-col>
            </row>
            <row>
                <i-col span="6"><Form-item label="模版">
                <i-Input type="text" v-model="editData.skin" placeholder="模版">
                </i-Input>
            </Form-item></i-col>
                <i-col span="6"><Form-item label="手机模版">
                <i-Input type="text" v-model="editData.mskin" placeholder="模版">
                </i-Input>
            </Form-item></i-col>
                <i-col span="10"><Form-item label="次页banner">
                <i-Input type="text" v-model="editData.bannerpic" placeholder="次页banner">
                </i-Input>
            </Form-item></i-col>
            <i-col span="2" style="text-align:center">                
                
                    <Upload 
                        ref="bannerupload"
                        :show-upload-list="false"
                        :on-success="handlebannerSuccess"
                        :format="['jpg','jpeg','png','gif']"
                        :max-size="2048"
                        :on-format-error="handleFormatError"
                        :on-exceeded-size="handleMaxSize"
                        :action="action">
                    <i-button>上传</i-button>
                    </Upload>
            </i-col>
            </row>
            <Form-item>
                <i-button type="primary" @click="save">提交</i-button>
            </Form-item>
        </p>
    </Card>
        </i-Form>
    </div>
    
</template>

<script>
import UEditor from '@/ueditor/ueditor.vue'
import api from '../../libs/api';
export default {
    name: 'content_systemadd',
      components: {UEditor},
    data () {
        return {
            action:wlfData.serverurl+"/upload/index",
            config: {
            //可以在此处定义工具栏的内容
            // toolbars: [
            //  ['fullscreen', 'undo', 'redo','|','bold', 'italic', 'underline',
            //  '|','superscript','subscript','|', 'insertorderedlist', 'insertunorderedlist',
            //  '|','fontfamily','fontsize','justifyleft','justifyright','justifycenter','justifyjustify']
            // ],
            autoHeightEnabled: false,
            autoFloatEnabled: true,
            initialContent:'',   //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
            autoClearinitialContent:true, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
            initialFrameWidth: null,
            initialFrameHeight: 260,
            BaseUrl: '',
            themePath:'/static/ueditor/themes/',
            UEDITOR_HOME_URL: '/static/ueditor/',
            wordCount:false
          },
            mode:"PC",
            ismobile:false,
            pagename:"添加",
            editData:{copyright:'<p></p>',mcopyright:'<p></p>',body:'<p></p>',mbody:'<p></p>'},
            categorylist:[],
            imgName: '',
            visible: false,
        };
    },
    methods: {
        save(){            
            var vm=this;   
            this.editData.copyright=this.$refs.copyright.getUEContent();
            this.editData.mcopyright=this.$refs.mcopyright.getUEContent();
            this.editData.body=this.$refs.body.getUEContent();
            this.editData.mbody=this.$refs.mbody.getUEContent();
            api.post("/info/save",this.editData).then(function(res){
                if(vm.editData.ID>0)
                    vm.$Message.success("修改成功！");
                else                    
                    vm.$Message.success("添加成功！");
                    vm.$router.push({
                        name: 'system_index',
                        query: {}
                    });
            })
        },
        setmode(){
            if(this.mode=="PC"){
                this.ismobile=false;
            }
            else{
                this.ismobile=true;
            }
        },
        handlebannerSuccess(res,file){
            var vm=this;
                vm.editData.bannerpic=res.msg.url;
        },
        init () {
            var vm=this;
            var id=this.$route.query.ID;
            if(id>0){
                this.pagename="编辑"; 
                api.get("/info/get/"+id).then(function(res){
                    vm.editData=res.data.msg;                    
                    delete  vm.editData.sid;
                    delete  vm.editData.mid;                    
                if(vm.editData.copyright==undefined){
                    vm.editData.copyright="";
                }                      
                if(vm.editData.mcopyright==undefined){
                    vm.editData.mcopyright="";
                }                      
                if(vm.editData.body==undefined){
                    vm.editData.body="";
                }                      
                if(vm.editData.mbody==undefined){
                    vm.editData.mbody="";
                }     
                vm.$refs.copyright.ready(function() {                                
                    vm.$refs.copyright.setUEContent(vm.editData.copyright);
                })
                vm.$refs.mcopyright.ready(function() {                                
                    vm.$refs.mcopyright.setUEContent(vm.editData.mcopyright);
                })
                vm.$refs.body.ready(function() {                                
                    vm.$refs.body.setUEContent(vm.editData.body);
                })
                vm.$refs.mbody.ready(function() {                                
                    vm.$refs.mbody.setUEContent(vm.editData.mbody);
                })
                })
            }
            else{
                this.pagename="添加";             
                this.$nextTick(() => {

                })
            }
        }
    },
    mounted () {
        this.init();
    },
    watch: {
        '$route' () {
            this.init();
        }
    }

};
</script>
